<template>
  <div>
    <h3>发表评论</h3>
    <hr>
    <textarea v-model="comment" name="" id="" cols="100%" rows="5">写入你要BB的内容(最多吐槽120字)</textarea>
    <mt-button @click='sendComment' size='large' type='primary'>发表评论</mt-button>
    <ul>
      <li v-for='(item,i) in cmtList' :key='item.add_time'>
        <div class='comment-title'>第{{i+1}}楼&nbsp;&nbsp;用户:{{ item.user_name }}&nbsp;&nbsp;发表时间:{{ item.add_time | dataFormat }}</div>
        <div class='comment-content'>{{ item.content }}</div>
      </li>
    </ul>
    <mt-button size='large' plain type='danger' @click="getMoreComments">加载跟多</mt-button>
  </div>
</template>

<script>
import {Toast} from 'mint-ui'
export default {
  data(){
    return {
      pageIndex: 1,
      cmtList:[],
      comment:''
    }
  },
  created(){
    this.getComments();
  },
  methods:{
    getComments(){
      this.$http.get('getcomments/' + this.id + "?pageindex=" + this.pageIndex).then(result => {
        if(result.body.status === 0){
          this.cmtList = this.cmtList.concat(result.body.message);
        }else{
          Toast('获取评论失败！');
        }
      })
    },
    getMoreComments(){
      this.pageIndex++;
      this.getComments();
    },
    sendComment(){
      if(this.comment.trim() === ''){
        return Toast('评论不能为空')
      }

      this.$http.post('postcomment/'+this.$route.params.id,{
        content: this.comment.trim()
      }).then(result => {
        if(result.body.status === 0){
          var data = new Data();
          var cmt = {
            user_name: '匿名用户',
            add_time: data.now(),
            content: this.comment.trim()
          }
          this.cmtList.unshift(cmt)
          this.comment = ''
        }
      })
    }
  },
  props:['id']
}
</script>

<style lang="scss" scoped>
  h3{
    font-size: 18px;
  }
  textarea{
    font-size:14px;
    height:85px;
    padding: 10 20px;
    color: #8f8f94;
    margin: 0;
  }
  ul, il{
    list-style: none;
    padding:0;
    margin:0;
  }
  .comment-title{
    font-size:14px;
    font-weight: 400;
    margin-top: 5px;
    background-color: #ddd;
    line-height: 30px;
  }
  .comment-content{
    font-size:16px;
    text-indent: 2em;
    line-height: 30px;
  }
</style>
